<template>
  <div class="dashBoard scrollbar_app">
    <tagRouter></tagRouter>
    <div class="row-container">
      <div class="grid-content ep-bg-purple bgc-color-3D0AC8">
        <el-statistic title="用户数量" :value="toNumberOfUsers" />
      </div>

      <div class="grid-content ep-bg-purple bgc-color-139279">
        <el-statistic title="订单数量" :value="toNumberOfTransactions" />
      </div>

      <div class="grid-content ep-bg-purple bgc-color-13922F">
        <el-statistic title="投入本金" :value="toAmountInvested" />
      </div>

      <div class="grid-content ep-bg-purple bgc-color-404043">
        <el-statistic title="收益总额" :value="toProceeds" />
      </div>
    </div>
    <div class="row-container">
      <div class="eachers-container-6">
        <eachers id="ea-eachers1" type="bar"></eachers>
      </div>
      <div class="eachers-container"></div>

      <div class="eachers-container-6">
        <eachers id="ea-eachers2" type="line"></eachers>
      </div>
    </div>
    <div class="dashBoardFoot">
      <div class="dashBoardFootBox">
        <!-- <el-tabs type="border-card" class="container">
          <el-tab-pane label="待付款">待付款</el-tab-pane>
          <el-tab-pane label="待发货">待发货</el-tab-pane>
          <el-tab-pane label="配送中">配送中</el-tab-pane>
          <el-tab-pane label="已发货">已发货</el-tab-pane>
          <el-tab-pane label="已签收">已签收</el-tab-pane>
          <el-tab-pane label="已完成">已完成</el-tab-pane>
        </el-tabs> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import eachers from "@/components/eachers/index.vue";
import { ref, onMounted } from "vue";
import { useTransition } from "@vueuse/core";
import tagRouter from "@/components/tagRouter/index.vue";
const numberOfUsers = ref(0); //用户数量
const numberOfTransactions = ref(0); //订单数量
const amountInvested = ref(0); //投入本金
const proceeds = ref(0); //收益总额
const inIt = () => {
  numberOfUsers.value = 45454;
  numberOfTransactions.value = 96895;
  amountInvested.value = 6566;
  proceeds.value = 23232;
};
const toNumberOfUsers = useTransition(numberOfUsers, {
  duration: 1500,
});
const toNumberOfTransactions = useTransition(numberOfTransactions, {
  duration: 1500,
});
const toAmountInvested = useTransition(amountInvested, {
  duration: 1500,
});
const toProceeds = useTransition(proceeds, {
  duration: 1500,
});
onMounted(() => {
  inIt();
});
</script>

<style lang="scss" scoped>
.dashBoard {
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
.row-container {
  width: 100%;
  margin: 10px 0px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  .grid-content {
    width: calc(25% - 8px);
    border-radius: 4px;
    min-height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
      cursor: pointer;
    }
  }
  .eachers-container {
    border-radius: 4px;
    width: calc(50% - 8px);
    min-height: 300px;
    background-color: #fff;
  }
  .eachers-container-6 {
    border-radius: 4px;
    width: calc(25% - 8px);
    min-height: 300px;
    background-color: #fff;
  }
}
.dashBoardFoot {
  width: 100%;
  height: calc(100vh - 560px);
  background-color: #fff;
  border-radius: 4px;
  .dashBoardFootBox {
    border-radius: 4px;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    .container {
      width: calc(100% - 20px);
      margin: 0 auto;
      margin-top: 10px;
    }
  }
}
</style>
